<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>placeholder text</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/test.style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/script.js"></script>
<style>

input[type=text]{
	color:#000;
	background:#fff;
}
textarea{
	color:#000;
	background:#fff;
}

/* style for placeholder */

/* これは placeholder を指定した要素に常に反映されてしまう
input[placeholder]{color:#f0f;}
textarea[placeholder]{color:#f9f;}
*/

/* .pht : for ie by javascript */
input[type=text].pht{
	color:#0f0;
}
textarea.pht{
	color:#9f9;
}
/* ::webkit-input-placeholder : for webkit コロンが二つ必要なことに注意 */
input[type=text]::-webkit-input-placeholder {
   color: #f00;
}
textarea::-webkit-input-placeholder {
   color: #f90;
}
/* :-moz-placeholder : for Mozilla */
input[type=text]:-moz-placeholder {
   color: #00f;
}
textarea:-moz-placeholder {
   color: #09f;
}
/* @TODO Opera が対応したら追加検討 */
</style>
</head>
<body>

<form action="html5.placeholder.htm" method="get">
<input type="text" value="" class="" placeholder="a" />
<input type="text" value="b" class="" placeholder="b" />
<input type="text" value="" class="" />
<input type="text" value="これはphtなし" class="" />
<textarea placeholder="ta">
</textarea>
<input type="submit" value="送信" />
<input type="button" value="ボタン" id="test" />
</form>

<div id="log"></div>

<p>メモ</p>
<ul>
<li><a href="http://diveintohtml5.org/forms.html#placeholder">placeholder text</a>について、IEは処理されないようなのでちょっと調べてみた。</li>
<li>formのactionの送付先を修正して受け取り確認するとよい</li>
<li>プラグインにしてもよかったんだけど、自分用jsファイルを用意するならそこに紛れ込ませておけば存在を忘れても問題ないのでよしとした。</li>
<li>ちょっとぐぐると、送信時にplaceholderテキストと同じ内容は送信できないという（事前に消してしまうから）状況の人が多かったようなので回避してみた。</li>
<li>ついでなのでFirefox,chrome,Safariのスタイル指定についても調べてみた。</li>
<li>Opera については、7/18 現在、ビルド1074、バージョン11.50にて、placeholder には対応しているが、スタイルシートは対応してないみたい？（リリースノートに記載なし）</li>
<li>工夫してあるところは、
	<ul>
	<li>placrholderに対応していないUAで処理されるので、IEに限らず未対応のUAでも（ある程度）動作する</li>
	<li>動作するものについては、placeholder textと同じものでも、手入力したものなら送信される</li>
	<li>valueに同じ値がセットされていても区別される(b)</li>
	<li>要は、半端な対応している Opera 以外のＡグレードブラウザはほとんどうまく使える（注：もちろん[type=text]セレクタが理解できない古いものはNG、JSがダメなのもNG）</li>
	</ul>
</li>
</ul>


<script type="text/javascript">
<!-- 
$(function() {

	// これは共通化でいい、新規エレメントのサポート状況確認関数
	var inputSupportsAttribute = function (attr) {
		var input = document.createElement('input');
		return attr in input;
	};
	// Placeholder text 対応されていないものだけを対象にする
	if (!inputSupportsAttribute('placeholder')) {
		$("#log").text("placeholder work by javascript. maybe It's IE(or Android) only...");

		function autoPlaceholderBlur(e){
			var v = e.val();
			var p = e.attr("placeholder");
			if (v == ""){
				e.val(p).data("pht",true).addClass("pht");
			}else if (v == p){
				e.filter(function(){return e.data("pht");}).data("pht",true).addClass("pht");
			}else{
				e.data("pht",false).removeClass("pht");
			}
		}
		function autoPlaceholderFocus(e){
			var v = e.val();
			if (e.data("pht") == true){
				e.val("").data("pht",false).removeClass("pht");
			}
		}
		function autoPlaceholderSubmit(e){
			e.find("[placeholder]").filter(function(){return $(this).data("pht");}).val("");
		}

		$("[placeholder]").blur(  function(){ autoPlaceholderBlur(  $(this) );} );
		$("[placeholder]").focus( function(){ autoPlaceholderFocus( $(this) );} );
		$("form").submit(         function(){ autoPlaceholderSubmit($(this) );} );
		// 初回のみ placeholder を持っている要素を全部blur()する
		$("[placeholder]").blur();


		// 何か別の処理時に呼び出したい場合は、placeholderを含んでいるformを渡せばいい
		// 例えば送信前にチェックルーチンなどを用意している場合、最初に autoPlaceholderSubmitを呼ぶようにする
		$("#test").click(function(){
			autoPlaceholderSubmit($(this).parents("form"));
		});
	}

	// これは確認用
	$("#test").click(function(){
		var str = "";
		$(":input").each(function(){
			str += $(this).val() + ":";
		});
		$("#log").text(str);
	});

});
// -->
</script>

</body>
</html>
